<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '详情',
  },
}
</route>
<template>
  <view class="chat-detail bg-[#f5f5f5] h-full">
    <!-- 顶部导航栏 -->
    <wd-navbar
      :title="groupName"
      left-arrow
      placeholder
      @click-left="handleBack"
      custom-style="background: #fff; border-bottom: none;"
      fixed
      safeAreaInsetTop
    >
      <template #right>
        <wd-icon name="ellipsis" size="22px" @click.stop="toSetting"></wd-icon>
      </template>
    </wd-navbar>

    <!-- 聊天内容区域 -->
    <scroll-view
      scroll-y
      class="chat-content flex-1 px-30rpx hide-scrollbar"
      :scroll-into-view="scrollToId"
      :scroll-with-animation="true"
      :style="{
        height: `calc(100vh - ${showEmoji || showMore ? '580rpx' : '180rpx'})`,
        paddingBottom: '180rpx',
      }"
      @scrolltoupper="loadMoreMessages"
    >
      <view
        v-for="(message, index) in state.message"
        :key="index"
        :id="'msg-' + (message.id || message.tmpId)"
        class="message-item mb-52rpx"
      >
        <chat-message-item
          v-if="index >= state.showMinIdx"
          :id="'chat-item-' + index"
          :headImage="headImage(message)"
          :showName="showName(message)"
          :msgInfo="message"
        ></chat-message-item>
      </view>
    </scroll-view>

    <!-- 底部输入区域 -->
    <view
      class="input-area bg-[#F5F5F5] fixed bottom-0 left-0 right-0 safe-area-bottom"
      :class="{ 'panel-open': showEmoji || showMore }"
    >
      <view class="flex items-center px-32rpx py-16rpx">
        <!-- 语音/键盘切换按钮 -->
        <wd-img
          v-if="isVoiceMode"
          width="48rpx"
          height="48rpx"
          mode="scaleToFill"
          src="/static/images/keyboard.png"
          class="mr-24rpx"
          @click.stop="toggleInputMode"
        />
        <wd-img
          v-if="!isVoiceMode"
          width="48rpx"
          height="48rpx"
          mode="scaleToFill"
          src="/static/images/voice.png"
          class="mr-24rpx"
          @click.stop="toggleInputMode"
        />

        <!-- 输入框/语音按钮 -->
        <view
          class="flex-1 bg-[#FFFFFF] border-rd-[10rpx_10rpx_10rpx_10rpx] h-72rpx flex items-center"
        >
          <input
            v-if="!isVoiceMode"
            v-model="inputText"
            class="flex-1 h-full px-32rpx text-28rpx"
            placeholder="发送消息..."
            :placeholder-style="'color: #999'"
            :focus="!isVoiceMode"
            :confirm-hold="true"
            confirm-type="send"
            @input="handleInput"
            @confirm="handleConfirm"
          />
          <view
            v-else
            class="voice-btn flex-1 h-full flex items-center justify-center"
            @touchstart.stop.prevent="startRecording"
            @touchend.stop.prevent="stopRecording"
            @touchcancel.stop.prevent="stopRecording"
          >
            按住说话
          </view>
        </view>

        <!-- 表情按钮 -->
        <wd-img
          class="mx-24rpx"
          width="48rpx"
          height="48rpx"
          mode="scaleToFill"
          src="/static/images/expression.png"
          @click.stop="toggleEmoji"
        />

        <!-- 更多功能按钮 -->
        <wd-img
          width="48rpx"
          height="48rpx"
          mode="scaleToFill"
          src="/static/images/more.png"
          @click.stop="toggleMore"
        />
      </view>

      <!-- 表情面板 -->
      <view v-if="showEmoji" class="emoji-panel" @click.stop>
        <scroll-view scroll-y class="emoji-container" :show-scrollbar="false">
          <view class="emoji-wrap">
            <text
              v-for="(emoji, index) in emojiList"
              :key="index"
              class="emoji-item"
              @tap="insertEmoji(emoji)"
            >
              {{ emoji }}
            </text>
          </view>
        </scroll-view>
      </view>

      <!-- 更多功能面板 -->
      <view v-if="showMore" class="more-panel" @click.stop>
        <!-- 更多功能内容保持不变 -->
        <scroll-view scroll-y class="h-400rpx p-32rpx">
          <view class="grid grid-cols-4 gap-32rpx">
            <view
              v-for="(item, index) in moreItems"
              :key="index"
              class="flex flex-col items-center"
              @tap="item.onClick"
            >
              <view
                class="w-96rpx h-96rpx bg-[#f5f5f5] rounded-full flex items-center justify-center mb-16rpx"
              >
                <wd-icon :name="item.icon" size="48rpx" color="#333" />
              </view>
              <text class="text-24rpx text-[#333]">{{ item.name }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view
      v-if="state.recording"
      class="w-full h-100vh fixed top-0px left-0px flex flex-col justify-center items-center z-10001 recording-main"
    >
      <image class="w-580rpx" src="/static/images/recording.gif" mode="widthFix"></image>
      <text class="mx-auto my--100rpx text-42rpx text-floralwhite">录音中</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { findGroupInfo, groupSend, membersGroupInfo } from '@/service/edu/group'
import * as recorderH5 from '@/common/recorder-h5'
import * as recorderApp from '@/common/recorder-app'
import { ref, onMounted, computed, nextTick, onUnmounted, watch } from 'vue'
import { useUserStore, useChatStore } from '@/store'
import type { Message } from '@/store/chatStore'
import chatMessageItem from '@/components/chat-message-item/chat-message-item.vue'
import * as enums from '@/utils/enums'
let recorder = null
// #ifdef H5
recorder = recorderH5
// #endif
// #ifndef H5
recorder = recorderApp
// #endif
const chatStore = useChatStore()
const inputText = ref('')
const scrollToId = ref('')
const groupName = ref('')
const groupId = ref('')
const isVoiceMode = ref(true)
const showEmoji = ref(false)
const showMore = ref(false)

const state = reactive({
  chat: {},
  group: {},
  groupMembers: [],
  showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡
  reqQueue: [], // 请求队列
  isSending: false, // 是否正在发送请求
  atUserIds: [],
  isReceipt: false, // 是否回执消息
  message: [],
  // 录音开始
  recording: false,
  durations: 0,
  rcTimer: null,
  // 录音结束
})

// 表情列表
const emojiList = [
  '😀',
  '😃',
  '😄',
  '😁',
  '😆',
  '😅',
  '😂',
  '🤣',
  '😊',
  '😇',
  '🙂',
  '🙃',
  '😉',
  '😌',
  '😍',
  '🥰',
  '😘',
  '😗',
  '😙',
  '😚',
  '😋',
  '😛',
  '😝',
  '😜',
  '🤪',
  '🤨',
  '🧐',
  '🤓',
  '😎',
  '🤩',
  '🥳',
  '😏',
  '😒',
  '😞',
  '😔',
  '😟',
  '😕',
  '🙁',
  '☹️',
  '😣',
  '😖',
  '😫',
  '😩',
  '🥺',
  '😢',
  '😭',
  '😤',
  '😠',
]
function headImage(msgInfo) {
  if (msgInfo.type == 0) {
    const member = state.groupMembers.find((m) => m.userId == msgInfo.sendId)
    return member ? member.headImage : ''
  } else {
    return ''
  }
}

function showName(msgInfo) {
  if (state.chat.type == '0') {
    const member = state.groupMembers.find((m) => m.userId == msgInfo.sendId)
    return member ? member.sendNickName : ''
  } else {
    return ''
  }
}

// 更多功能列表
const moreItems = [
  {
    name: '图片',
    icon: 'picture',
    onClick: () => {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          console.log(res.tempFilePaths)
          // 处理选择的图片
          handleSendImage(res.tempFilePaths[0])
        },
      })
    },
  },
  {
    name: '拍摄',
    icon: 'camera',
    onClick: () => {
      uni.chooseImage({
        sourceType: ['camera'],
        success: (res) => {
          console.log(res.tempFilePaths)
          // 处理拍摄的照片
          handleSendImage(res.tempFilePaths[0])
        },
      })
    },
  },
  // { name: '视频通话', icon: 'video-o', onClick: () => console.log('视频通话') },
  // { name: '位置', icon: 'location-o', onClick: () => console.log('位置') },
  // { name: '文件', icon: 'file-o', onClick: () => console.log('文件') },
]

onMounted(() => {
  nextTick(() => {
    scrollToBottom()
  })
})

onUnmounted(() => {
  // 移除页面点击事件监听
  document.removeEventListener('click', handlePageClick)
})

const handleBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
  } else {
    uni.switchTab({
      url: '/pages/discussion/discussion',
    })
  }
}

const loadMoreMessages = () => {
  // 加载更多历史消息的逻辑
}

// 切换语音/键盘输入模式
const toggleInputMode = () => {
  isVoiceMode.value = !isVoiceMode.value
  showEmoji.value = false
  showMore.value = false
}
function endRecordh5() {}
// 开始录音
const startRecording = () => {
  // 这里添加录音逻辑

  /* 用户第一次使用语音会唤醒录音权限请求，此时会导致@touchend失效，
				一直处于录音状态，这里允许用户再次点击发送语音并结束录音 */
  if (state.recording) {
    stopRecording()
    return
  }
  recorder
    .start()
    .then(() => {
      console.log('开始录音成功')
      state.recording = true
      // 开始计时
      startTimer()
    })
    .catch((e) => {
      console.log('录音失败' + JSON.stringify(e))
    })
}

function startTimer() {
  state.durations = 0
  StopTimer()
  state.rcTimer = setInterval(() => {
    state.durations++
    if (state.durations >= 60) {
      startRecording()
    }
  }, 1000)
}
function StopTimer() {
  state.rcTimer && clearInterval(state.rcTimer)
  state.rcTimer = null
}

// 结束录音
const stopRecording = () => {
  state.recording = false
  recorder.pause()

  // 停止计时
  StopTimer()

  // 小于1秒不发送
  if (state.durations == 0) {
    uni.showToast({
      title: '说话时间太短',
      icon: 'none',
    })
    recorder.close()
    return
  }

  // 停止录音
  // uni.showToast({
  //   title: '结束录音',
  //   icon: 'none',
  // })
  // 这里添加结束录音逻辑
  recorder.upload().then(async (data) => {
    console.log('======data-----', data)
    const msgInfo = {
      content: JSON.stringify(data),
      type: enums.MESSAGE_TYPE.AUDIO,
      receipt: state.isReceipt,
    }
    fillTargetId(msgInfo, state.chat?.targetId)
    const message = await sendMessageRequest(msgInfo)
    if (message) {
      message.selfSend = true
      chatStore.insertMessage(message)
      // 滚动到底部
      await nextTick()
      scrollToBottom()
    }
  })
}

// 切换表情面板
const toggleEmoji = (e: Event) => {
  e.stopPropagation()
  showEmoji.value = !showEmoji.value
  showMore.value = false
  isVoiceMode.value = false
}

// 插入表情
const insertEmoji = (emoji: string) => {
  inputText.value += emoji
}

// 切换更多功能面板
const toggleMore = (e: Event) => {
  e.stopPropagation()
  showMore.value = !showMore.value
  showEmoji.value = false
}

const shouldShowTime = (message: any, index: number) => {
  if (index === 0) return true
  const prevMessage = messages.value[index - 1]
  // 这里可以添加间间隔的判断逻辑
  return message.time !== prevMessage.time
}

const previewImage = (url: string) => {
  uni.previewImage({
    urls: [url],
    current: url,
  })
}

// @用户或者全体成员
function createAtText() {
  const atText = ''
  return atText
}

function fillTargetId(msgInfo, targetId) {
  if (state.chat?.type === 'GROUP') {
    msgInfo.groupId = targetId
  } else {
    msgInfo.recvId = targetId
  }
  msgInfo.atUserIds = []
}

function processReqQueue() {
  if (state.reqQueue.length) {
    const reqData = state.reqQueue.shift()
    groupSend(reqData.msgInfo)
      .then((res) => {
        if (res && res.code === 200) {
          reqData.resolve(res.data)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
      .catch((e) => {
        reqData.reject(e)
      })
      .finally(() => {
        state.isSending = false
        // 发送下一条请求
        processReqQueue()
      })
  }
}
function sendMessageRequest(msgInfo) {
  return new Promise((resolve, reject) => {
    // 请求入队列，防止请求"后发先至"，导致消息错序
    state.reqQueue.push({ msgInfo, resolve, reject })
    processReqQueue()
  })
}
// 修改发送消息的处理函数
const handleSendMessage = async () => {
  // 统一处理输入内容，处理可能的空格和换行符
  const messageContent = String(inputText.value || '').trim()

  // 检查消息内容是否为空
  if (!messageContent) {
    // 避免重复提示
    if (!state.isSending) {
      // uni.showToast({
      //   title: '请输入消息内容',
      //   icon: 'none',
      //   duration: 1500,
      // })
    }
    return
  }

  try {
    state.isSending = true
    const content = {
      receipt: state.isReceipt,
      content: messageContent,
      type: 0,
    }

    // 发送消息时关闭面板
    showEmoji.value = false
    showMore.value = false

    // 先清空输入框
    inputText.value = ''

    // 发送消息
    fillTargetId(content, state.chat?.targetId)
    const message = await sendMessageRequest(content)
    if (message) {
      message.selfSend = true
      chatStore.insertMessage(message)

      // 滚动到底部
      await nextTick()
      scrollToBottom()
    }
  } catch (error) {
    console.error('发送消息失败:', error)
    uni.showToast({
      title: '发送失败，请重试',
      icon: 'none',
    })
  } finally {
    state.isSending = false
  }
}

// 添加输入框事件处理
const handleInput = (e: any) => {
  // 处理安卓输入法可能的特殊字符
  inputText.value = String(e.detail.value || '').replace(/\u200b/g, '')
}

// 添加确认发送事件处理
const handleConfirm = () => {
  handleSendMessage()
}

// 添加时间格式化函数
const formatTime = (date: Date) => {
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

// 添加图片加载完成的处理函数
const onImageLoad = () => {
  // 图片加载完成后滚动到底部
  nextTick(() => {
    const lastMessage = messages.value[messages.value.length - 1]
    if (lastMessage) {
      scrollToId.value = 'msg-' + lastMessage.id
    }
  })
}

// 添加处理更多功能点击的方法
const handleMoreItemClick = (item: any) => {
  item.onClick()
  // 点击后关闭面板
  showMore.value = false
}

// 修改面点击事件，点击空白处关闭面板
const handlePageClick = () => {
  showEmoji.value = false
  showMore.value = false
}
// 获取群组信息
async function handleLoadGroup() {
  const res = await membersGroupInfo(groupId.value)
  if (res.code === 200) {
    state.groupMembers = res.data || []
  }
}
onShow(() => {
  const pages = getCurrentPages()
  const currentPage: any = pages[pages.length - 1]
  const query = currentPage.$page?.options || currentPage?.options || currentPage.$route.query
  if (query) {
    groupId.value = query.id
    handleLoadGroup()
    for (let i = 0; i < chatStore.chats.length; i++) {
      if (chatStore.chats[i].targetId === query.id) {
        state.chat = chatStore.chats[i]
        groupName.value = decodeURIComponent(chatStore.chats[i].showName)
        chatStore.activeChat(i)
        break
      }
    }
  }

  // 添加页面点击事件监听
  document.addEventListener('click', handlePageClick)
})
function generateId() {
  // 生成临时id
  return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000))
}
const userStore = useUserStore()

// 发送图片消息
async function handleSendImage(tempFilePath) {
  // 先上传图片
  try {
    const uploadRes = await uploadFile(tempFilePath)

    // 发送图片消息
    const data = {
      originUrl: uploadRes.url,
      thumbUrl: uploadRes.url,
    }
    const { userId } = userStore.userInfo as unknown as IUserInfo
    const msgInfo = {
      id: 0,
      tmpId: generateId(),
      fileId: uploadRes.ossId,
      sendId: userId,
      content: JSON.stringify(data),
      sendTime: new Date().getTime(),
      selfSend: true,
      type: enums.MESSAGE_TYPE.IMAGE,
      readedCount: 0,
      loadStatus: 'loading',
      status: enums.MESSAGE_STATUS.UNSEND,
    }
    fillTargetId(msgInfo, state.chat?.targetId)
    const message = await sendMessageRequest(msgInfo)
    if (message) {
      message.selfSend = true
      chatStore.insertMessage(message)

      // 滚动到底部
      await nextTick()
      scrollToBottom()
    }
  } catch (error) {
    uni.showToast({
      title: '发送失败',
      icon: 'none',
    })
  }
}

// 上传文件
function uploadFile(filePath: string): Promise<any> {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: '/resource/oss/upload', // 替换为实际的上传接口
      filePath,
      name: 'file',
      success: (res) => {
        const data = JSON.parse(res.data)
        console.log('data======', data)
        if (data.code === 200) {
          resolve(data.data)
        } else {
          reject(new Error(data.msg))
        }
      },
      fail: reject,
    })
  })
}

// 滚动到底部
const scrollToBottom = () => {
  try {
    const messages = state.chat?.messages
    if (!messages?.length) return

    const lastMessage = messages[messages.length - 1]
    if (!lastMessage) return

    // 使用消息ID或临时ID作为滚动标识
    scrollToId.value = `msg-${lastMessage.id || lastMessage.tmpId}`

    // 强制滚动
    nextTick(() => {
      const query = uni.createSelectorQuery()
      query.select(`#${scrollToId.value}`).boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec((res) => {
        if (res[0] && res[1]) {
          uni.pageScrollTo({
            scrollTop: res[1].scrollTop + res[0].top,
            duration: 300,
          })
        }
      })
    })
  } catch (error) {
    console.error('滚动失败:', error)
  }
}
watch(
  () => state.chat.messages,
  (newVal, oldLen) => {
    state.message = newVal
  },
  {
    deep: true, // 启用深度监听
  },
)

// 监听新消息
watch(
  () => state.chat?.messages?.length,
  (newLen, oldLen) => {
    if (newLen > oldLen) {
      scrollToBottom()
    }
  },
)

// 页面加载完成后滚动到底部
onMounted(() => {
  nextTick(() => {
    scrollToBottom()
  })
})

// 页面显示时滚动到底部
onShow(() => {
  nextTick(() => {
    scrollToBottom()
  })
})

function toSetting() {
  uni.navigateTo({
    url: `/pages/group/setting?groupId=${groupId.value}`,
  })
}
</script>

<style lang="scss" scoped>
.chat-detail {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;

  // 移除黑线
  &::after {
    display: none;
  }
}

.chat-content {
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  padding-top: 20rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
}

// 优化消息间距
.message-item {
  margin-bottom: 40rpx;
  animation: fadeIn 0.3s ease-out;

  &:last-child {
    margin-bottom: 0;
  }
}

.input-area {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #f5f5f5;
  border-top: 1rpx solid #eee;
  transition: bottom 0.3s;

  &.panel-open {
    bottom: 420rpx;
  }
}

// 修改表情面板和更多功能面板样式
.emoji-panel,
.more-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 420rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);

  .scroll-view {
    box-sizing: border-box;
    height: 100%;
  }
}

// 优化表情面板内容
.emoji-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  height: 420rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  border-top: 1rpx solid #eee;

  .emoji-container {
    height: 100%;

    .emoji-wrap {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 20rpx;

      .emoji-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% / 8); // 每行8个表情
        height: 80rpx;
        font-size: 48rpx;

        &:active {
          background-color: #f5f5f5;
          border-radius: 8rpx;
        }
      }
    }
  }
}

// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

// 优化更多功能面板内容
.more-panel {
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32rpx;
    padding: 32rpx;
  }

  .more-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108rpx;
    height: 108rpx;
    margin: 0 auto 16rpx;
    background-color: #f7f7f7;
    border-radius: 24rpx;
    transition: background-color 0.2s ease;

    &:active {
      background-color: #f0f0f0;
    }
  }

  .more-item-text {
    font-size: 24rpx;
    line-height: 1.4;
    color: #333;
    text-align: center;
  }
}

// 优化导航栏样式
:deep(.wd-navbar) {
  background-color: #fff !important;

  &::after {
    display: none;
  }

  .wd-navbar__title {
    font-size: 36rpx !important;
    font-weight: 500;
  }

  .wd-navbar__left {
    .wd-icon {
      color: #333;
    }
  }
}

// 优化安全区域
.safe-area-bottom {
  padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
}

// 消息项动画

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
// 优化用户名显示
.user-name {
  padding-left: 8rpx;
  margin-bottom: 8rpx;
  font-size: 24rpx;
  color: #999;
}

.message-bubble {
  position: relative;
  display: inline-block;
  max-width: 520rpx;
  padding: 20rpx 24rpx;
  word-break: break-all;
  border-radius: 12rpx;

  // 优化气泡样式
  &:not(.self) {
    margin-right: 180rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    &::before {
      position: absolute;
      top: 24rpx;
      left: -16rpx;
      width: 0;
      height: 0;
      content: '';
      border: 8rpx solid transparent;
      border-right-color: #fff;
    }
  }

  &.self {
    margin-left: 180rpx;
    background-color: #07c160;
    box-shadow: 0 2rpx 8rpx rgba(7, 193, 96, 0.2);

    &::before {
      position: absolute;
      top: 24rpx;
      right: -16rpx;
      width: 0;
      height: 0;
      content: '';
      border: 8rpx solid transparent;
      border-left-color: #07c160;
    }
  }

  // 优化图片和视频显示
  image,
  video {
    display: block;
    max-width: 400rpx;
    overflow: hidden;
    border-radius: 8rpx;
  }

  // 优化文本消息
  .text-message {
    min-width: 40rpx;
    max-width: 100%;
    font-size: 32rpx;
    line-height: 44rpx;
  }
}

// 优化时间显示
.time-divider {
  margin: 24rpx 0;

  .time {
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    color: #999;
    // background-color: rgba(0, 0, 0, 0.03);
    border-radius: 24rpx;
  }
}

// 优化头像样式
.avatar-image {
  flex-shrink: 0;
  object-fit: cover;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.recording-main {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255),
    rgba(30, 30, 30, 0.5),
    rgba(7, 7, 7, 0.9)
  );
}
</style>
